<template>
  <component :is="componentMap[message.type]" :body="message.payload" :data-message-id="message.ID" />
</template>
<script setup lang="ts">
import Text from './Text.vue'
import Image from './Image.vue'
import Emoji from './Emoji.vue'
import Announcement from './Announcement.vue'
import type { Component } from 'vue'
import TencentCloudChat, { Message } from '@tencentcloud/chat'

const componentMap: Partial<Record<TencentCloudChat.TYPES, Component>> = {
  [TencentCloudChat.TYPES.MSG_TEXT]: Text,
  [TencentCloudChat.TYPES.MSG_IMAGE]: Image,
  [TencentCloudChat.TYPES.MSG_FACE]: Emoji,
  [TencentCloudChat.TYPES.MSG_GRP_SYS_NOTICE]: Announcement
}

defineProps<{ message: Message }>()
</script>
